<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- 一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成 -->

        <h4>1.表单域</h4>
        <!-- <form>会把它范围内的表单元素信息提交给服务器 -->
        <form action="url地址" method="提交方式" name="名字">
        </form>

        <h4>2.表单元素</h4>
        <h4>input输入表单元素</h4>
        <form action="xxx.php" method="GET">
            用户名：<input type="text" name="username" maxlength="6" value="请输入用户名"> <br>
            密码：<input type="password" name="password"> <br>
            性别：男 <input type="radio" name="sex" value="男" checked> 女 <input type="radio" value="女" name="sex"> <br>
            爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby">
            <br>
            <!-- 点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
            <input type="submit" value="免费注册">

            <input type="reset" value="重新填写">
            <!-- 普通按钮 后期结合js 搭配使用 -->
            <input type="button" value="获取短信验证码">
            <!-- 文件域 使用场景 上传文件使用的 -->
            上传头像：<input type="file">
        </form>

        <h4>label标签</h4>
        <!-- 用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动
        将焦点转到对应的表单元素上，用来增加用户体验 -->
        <label for="text">用户名：</label> <input type="text" id="text">

        <h4>select下拉表单元素</h4>
        <form>
            籍贯：
            <select>
                <option>山东</option>
                <option>北京</option>
                <option>天津</option>
                <option selected="selected">火星</option>
            </select>
        </form>

        <h4>textarea文本域元素</h4>
        <form>
            今日反馈：
            <textarea cols="50" rows="5">Hello Everyone!</textarea>
        </form>
</body>
</html>